import React, {Component} from 'react';
import {observer} from 'mobx-react';
import { withRouter } from 'react-router-dom';
import { Timeline } from 'weaver-mobile';
import Item from './Item';

@withRouter
@observer
export default class DataList extends Component {
    getDot = (data) => {
        const {active, type} = data;
        return (<div className={`dot dot-${active == '1' ? 'active' : 'default'}`}><div>{type == 'on' ? '上' : '下'}</div></div>);
    }

    render(){
        const {store, store: {timeLineInfo}} = this.props;
        const {timeline = []} = timeLineInfo || {};
        
        return (
            <div className='sign-data-list'>
                <Timeline>
                {
                    timeline.map((data, i) => (
                        <Timeline.Item key={i} dot={this.getDot(data)}>
                            <Item store={store} data={data} />
                        </Timeline.Item>
                    ))
                }
                </Timeline>
            </div>
        )
    }
}